<template>
  <div class="view-thematicpage">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/thematicPage' }">专题页管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="thematicpage-content">
      <!--banner-->
      <div class="banner">
        <div class="img-content">
          <img :src="info.bannerImgs" alt="">
          <div class="shade"></div>
        </div>
        <div class="banner-title"><div class="banner-title-content">{{info.title}}</div></div>
        <div class="banner-subhead"><div class="banner-subhead-content">{{info.subhead}}</div></div>
        <div class="banner-line"></div>
      </div>
      <!--概要-->
      <div class="abstract">
        <div v-html="info.summary"></div>
      </div>
      <!--楼盘列表-->
      <div v-for="(house,ind) in info.devs" class="house-item">
        <div class="house-header">
          <div class="flag"></div>
          <span>楼盘{{chinaNum[ind]}}</span>
        </div>
        <div class="house-content">
          <dl>
            <dt>
              <img :src="house.effectId.length>0?house.effectId[0].url: ''" alt="">
              <div class="ming" v-show="house.isTransparent==1">明房源</div>
            </dt>
            <dd class="house-info">
              <h2 class="house-title">{{house.devName}}</h2>
              <div class="tip1">
                <div class="tip1-item">{{house.addressDistrict}}</div><em></em>
                <div class="tip1-item">{{house.propertyType}}</div><em></em>
                <div class="tip1-item" v-show="house.devSquareMetre">建面 {{house.devSquareMetre}}m²</div>
              </div>
              <div class="tip2">
                <div class="tip2-item" v-show="house.feature" v-for="bb in house.feature.split(',')">{{bb}}</div>
              </div>
              <div class="price">{{house.averPrice}}元/㎡</div>
            </dd>
          </dl>
        </div>
        <div class="introduce-label">推荐理由</div>
        <div class="introduce-content">{{house.recommendReason}}</div>
      </div>
      <div class="the-end">
        <p v-html="info.tag"></p>
      </div>
      <div class="disclaimer">
        <p v-html="info.disclaimer"></p>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api/apiPath'
  export default {
    name: "ViewThematicPage",
    data () {
      return {
        chinaNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
        info: {
          title: '',
          subhead: '',
          bannerImgs: '',
          summary: '文本摘要',
          devs: [],
          tag: '结束语',
          disclaimer: '免责声明：'
        }
      }
    },
    created(){
      this.axios.get(api.THEMATICPAGEVIEW+'?id='+this.$route.query.id).then(res => {
        this.info = res.data.data
      })
    }
  }
</script>

<style lang="stylus">
  .view-thematicpage{
    .thematicpage-content{
      margin: 0 auto;
      border: 1px solid #ccc;
      width: 450px;
      box-sizing: border-box;
      .banner{
        height: 200px;
        position: relative;
        .img-content{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          overflow: hidden;
          img{
            width: 100%;
            height: auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
          .shade{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
          }
        }
        .banner-title{
          position: absolute;
          top: 80px;
          width: 100%;
          height: 30px;
          .banner-title-content{
            margin: 0 40px;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            color: #fff;
            font-weight: bold;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .banner-subhead{
          position: absolute;
          top: 122px;
          width: 100%;
          height: 20px;
          .banner-subhead-content{
            margin: 0 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .banner-line{
          position: absolute;
          top: 148px;
          width: 20px;
          height: 3px;
          background: #fff;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .abstract{
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
      }
      .house-item{
        .house-header{
          margin: 19px;
          height: 28px;
          position: relative;
          .flag{
            position: absolute;
            bottom: 3px;
            width: 68px;
            height: 8px;
            background: #FFA600;
            left: 50%;
            transform: translateX(-50%);
          }
          span{
            position: absolute;
            font-size: 20px;
            line-height: 28px;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .house-content{
          margin: 20px;
          padding: 18px 14px;
          box-sizing: border-box;
          background: #fff;
          border: 1px solid #f7f7f7;
          box-shadow: 0 0 15px rgba(149,77,0,0.05);
          dl{
            margin: 0;
            display: flex;
            height: 90px;
            dt{
              flex: 0 0 120px;
              position: relative;
              img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 0;
                transform: translateY(-50%)
              }
              .ming{
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 14px;
                line-height: 15px;
                text-align: center;
                background: #FFA600;
                color: #fff;
                font-size: 9px;
                border-radius: 2px;
              }
            }
            .house-info{
              margin: 0;
              padding: 0;
              padding-left: 12px;
              flex:1;
              .house-title{
                margin: 0;
                line-height: 16px;
                font-size: 16px;
                font-weight: bold;
              }
              .tip1{
                display: flex;
                margin-top: 9px;
                .tip1-item{
                  height: 12px;
                  line-height: 12px;
                  font-size: 12px;
                  color: #8B8B8B;
                  white-space: nowrap;
                }
                em{
                  width: 1px;
                  height: 12px;
                  margin: 0 6px;
                  background: #8B8B8B;
                }
              }
              .tip2{
                height: 16px;
                margin-top: 9px;
                .tip2-item{
                  display: inline-block;
                  margin-right: 6px;
                  padding: 0 3px;
                  text-align: center;
                  height: 16px;
                  line-height: 16px;
                  font-size: 12px;
                  background: #FFF3E6;
                  color: #FE964F;
                }
              }
              .price{
                margin-top: 12px;
                font-size: 16px;
                color: #FF6800;
              }
            }
          }
        }
        .introduce-label{
          margin: 20px 20px 10px 20px;
          height: 22px;
          line-height: 22px;
          font-size: 16px;
        }
        .introduce-content{
          padding: 20px;
          padding-top: 0;
          font-size: 14px;
          color: #969696;
          line-height: 1.5;
        }
      }
      .the-end{
        margin: 0 20px;
        padding: 20px 0;
        font-size: 14px;
        line-height: 1.5;
        color: #555;
        border-top: 1px solid #E5E5E5;
      }
      .disclaimer{
        margin:0 20px 20px;
        font-size: 11px;
        line-height: 1.5;
        color: #7C7C7C;
        p{
          margin: 0;
        }
      }
    }
  }
</style>
